<template>
  <div class="app-container">
    <el-card class="review-container">
      <!-- 测试基本信息 -->
      <div class="review-header">
        <h2>{{ test.title }}</h2>
        <div class="test-info">
          <div>开始时间：{{ formatTime(record.startTime) }}</div>
          <div>结束时间：{{ formatTime(record.endTime) }}</div>
          <div>总分：{{ form.totalScore }}分</div>
        </div>
      </div>

      <!-- 答题详情 -->
      <div class="answer-details">
        <h3>答题详情</h3>
        <div v-for="(question, index) in test.questions" :key="question.id" class="question-item">
          <div class="question-header">
            <span class="question-number">{{ index + 1 }}.</span>
            <span class="question-text">{{ question.questionText }}</span>
            <span class="question-score">({{ question.score }}分)</span>
          </div>
          <div class="answer-content">
            <div class="answer-label">考生答案：</div>
            <div class="answer-text">{{ getAnswer(question.id) }}</div>
          </div>
          <div v-if="question.correctAnswer" class="answer-content">
            <div class="answer-label">正确答案：</div>
            <div class="answer-text">{{ question.correctAnswer }}</div>
          </div>
        </div>
      </div>

      <!-- 评审表单 -->
      <div class="review-form">
        <h3>评审结果</h3>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="总分" prop="totalScore">
            <el-input-number v-model="form.totalScore" :min="0" :max="test.totalScore" />
          </el-form-item>
          
          <el-form-item label="等级" prop="level">
            <el-select v-model="form.level" placeholder="请选择等级">
              <el-option label="优秀" value="优秀" />
              <el-option label="良好" value="良好" />
              <el-option label="中等" value="中等" />
              <el-option label="及格" value="及格" />
              <el-option label="不及格" value="不及格" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="维度得分" prop="dimensionScores">
            <el-input
              v-model="form.dimensionScores"
              type="textarea"
              placeholder="请输入各维度得分，例如：认知能力:85,情绪管理:90"
            />
          </el-form-item>
          
          <el-form-item label="分析" prop="analysis">
            <el-input
              v-model="form.analysis"
              type="textarea"
              :rows="4"
              placeholder="请输入测评分析"
            />
          </el-form-item>
          
          <el-form-item label="建议" prop="suggestions">
            <el-input
              v-model="form.suggestions"
              type="textarea"
              :rows="4"
              placeholder="请输入改进建议"
            />
          </el-form-item>
          
          <el-form-item label="评审意见" prop="reviewComments">
            <el-input
              v-model="form.reviewComments"
              type="textarea"
              :rows="4"
              placeholder="请输入评审意见"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 操作按钮 -->
      <div class="review-actions">
        <el-button @click="$router.push('/test/test-record-list')">返回列表</el-button>
        <el-button type="primary" @click="submitReview">提交评审</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getTestDetail } from '@/api/psychological-test'
import { getTestRecordDetail, submitReview } from '@/api/psychological-test'
import { showErrorMessage } from '@/utils/request'

export default {
  name: 'TestReview',
  data() {
    return {
      recordId: null,
      test: {
        title: '',
        description: '',
        totalScore: 0,
        questions: []
      },
      record: {
        startTime: null,
        endTime: null,
        answers: []
      },
      form: {
        totalScore: 0,
        level: '',
        dimensionScores: '',
        analysis: '',
        suggestions: '',
        reviewComments: ''
      },
      rules: {
        totalScore: [
          { required: true, message: '请输入总分', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择等级', trigger: 'change' }
        ],
        dimensionScores: [
          { required: true, message: '请输入维度得分', trigger: 'blur' }
        ],
        analysis: [
          { required: true, message: '请输入测评分析', trigger: 'blur' }
        ],
        suggestions: [
          { required: true, message: '请输入改进建议', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.recordId = this.$route.params.id
    if (!this.recordId) {
      showErrorMessage('无效的记录ID')
      this.$router.push('/test/record-list')
      return
    }
    this.getReviewInfo()
  },
  methods: {
    async getReviewInfo() {
      try {
        // 获取测试记录
        const recordRes = await getTestRecordDetail(this.recordId)
        if (recordRes.code !== 200 || !recordRes.data) {
          throw new Error('获取测试记录失败')
        }
        this.record = recordRes.data

        // 获取测试详情
        const testRes = await getTestDetail(this.record.testId)
        if (testRes.code !== 200 || !testRes.data) {
          throw new Error('获取测试详情失败')
        }
        this.test = testRes.data
      } catch (error) {
        console.error('获取评审信息失败:', error)
        showErrorMessage(error.message || '获取评审信息失败')
      }
    },
    getAnswer(questionId) {
      const answer = this.record.answers?.find(a => a.questionId === questionId)
      return answer ? answer.answer : ''
    },
    formatTime(time) {
      if (!time) return ''
      return new Date(time).toLocaleString()
    },
    async submitReview() {
      try {
        await this.$refs.form.validate()
        
        const response = await submitReview(this.recordId, this.form)
        
        if (response.code === 200) {
          this.$message.success('评审提交成功')
          this.$router.push('/test/record-list')
        } else {
          throw new Error(response.msg || response.message || '提交失败')
        }
      } catch (error) {
        console.error('提交评审失败:', error)
        this.$message.error(error.message || '提交评审失败，请重试')
      }
    }
  }
}
</script>

<style scoped>
.review-container {
  max-width: 800px;
  margin: 0 auto;
}

.review-header {
  text-align: center;
  margin-bottom: 30px;
}

.test-info {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: #666;
  margin: 10px 0;
}

.answer-details {
  margin: 20px 0 40px;
}

.question-item {
  margin-bottom: 20px;
}

.question-header {
  margin-bottom: 10px;
}

.question-number {
  font-weight: bold;
  margin-right: 10px;
}

.question-score {
  color: #666;
  margin-left: 10px;
}

.answer-content {
  margin-left: 25px;
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}

.answer-label {
  color: #666;
  min-width: 80px;
}

.review-form {
  margin: 20px 0;
}

.review-form h3 {
  margin-bottom: 20px;
}

.review-actions {
  text-align: center;
  margin-top: 30px;
}
</style> 